<template>
  <div class="app-container">
    <el-tabs :tab-position="tabPosition" v-model="activeName">
      <el-tab-pane name="first">
        <el-form :model="queryParams" ref="assessListForm" size="small" :inline="true" v-show="showSearch"
                 label-width="68px">
          <el-form-item prop="assessName">
            <el-input
              v-model="queryParams.assessName"
              placeholder="搜索方案名称"
              clearable
              @keyup.enter.native="handleQuery"
              style="width: 150px"
            />
          </el-form-item>
          <input type="text" style="display: none;">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" type="warning" @click="resetQuery">重置</el-button>
          </el-form-item>
          <el-button style="float: right;margin-right: 30px" @click="firstClickTab" type="success">考核计划</el-button>

        </el-form>
        <el-tabs @tab-click="getList" v-model="queryParams.status" type="border-card">
          <el-tab-pane name="0" label="进行中">
            <el-table :data="performanceList" style="width: 100%">
              <el-table-column prop="assessName" align="center" label="考核名称"></el-table-column>
              <el-table-column prop="assessPeriod" align="center" label="考核周期"></el-table-column>
              <el-table-column prop="headcount" align="center" label="考核总人数"></el-table-column>
              <el-table-column prop="completed" align="center" label="已完成"></el-table-column>
              <el-table-column prop="unfinished" align="center" label="未完成"></el-table-column>
              <el-table-column prop="createTime" align="center" label="创建日期">
                <template slot-scope="scope">
                  {{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}
                </template>
              </el-table-column>
              <el-table-column prop="assessDeadline" align="center" label="考核截至日期">
                <template slot-scope="scope">
                  {{ parseTime(scope.row.assessDeadline, '{y}-{m}-{d}') }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="fourthInfoClick(scope.row.aid)">查看详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList()"
            />
          </el-tab-pane>
          <el-tab-pane name="1" label="已完成">
            <el-table :data="performanceList" style="width: 100%">
              <el-table-column prop="assessName" align="center" label="考核名称"></el-table-column>
              <el-table-column prop="assessPeriod" align="center" label="考核周期"></el-table-column>
              <el-table-column prop="headcount" align="center" label="考核总人数"></el-table-column>
              <el-table-column prop="completed" align="center" label="已完成"></el-table-column>
              <el-table-column prop="unfinished" align="center" label="未完成"></el-table-column>
              <el-table-column prop="createTime" align="center" label="创建日期">
                <template slot-scope="scope">
                  {{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}
                </template>
              </el-table-column>
              <el-table-column prop="assessDeadline" align="center" label="考核截至日期">
                <template slot-scope="scope">
                  {{ parseTime(scope.row.assessDeadline, '{y}-{m}-{d}') }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="fourthInfoClick(scope.row.aid)">查看详情
                  </el-button>
                  <el-button
                    size="mini"
                    @click="synchronizationSalary(scope.row)"
                    type="text">同步薪酬
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList()"
            />
          </el-tab-pane>
        </el-tabs>

      </el-tab-pane>
      <el-tab-pane name="second">
        <el-button style="float: left" @click="secondTopClick">返回</el-button>
        <el-steps :active="1" :space="500" align-center>
          <el-step title="设置考核信息" icon="el-icon-edit"></el-step>
          <el-step title="选择考核流程" icon="el-icon-upload"></el-step>
        </el-steps>
        <br>
        <hr>
        <div style="margin: 50px;padding-left: 380px">
          <div>
            <el-form ref="infoForm" :rules="infoRules" label-position="right" label-width="80px"
                     :model="itoAssessInfoDTO.assessInfo">
              <el-row>
                <el-col :span="12">
                  <el-form-item prop="assessName" label="考核名称">
                    <el-input v-model="itoAssessInfoDTO.assessInfo.assessName"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item prop="assessPeriod" label="考核周期">
                    <el-select v-model="itoAssessInfoDTO.assessInfo.assessPeriod" placeholder="请选择">
                      <el-option value="月度"></el-option>
                      <el-option value="季度"></el-option>
                      <el-option value="年度"></el-option>
                      <el-option value="其他"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item prop="assessDeadline" label="截至时间">
                    <el-date-picker
                      v-model="itoAssessInfoDTO.assessInfo.assessDeadline"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item prop="remark" label="备注">
                    <el-input type="textarea" v-model="itoAssessInfoDTO.assessInfo.remark"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item prop="userIds" label="选择员工">
                    <el-button @click="addEmp">添加员工</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
                    <span style="color: #00afff;font-size: 16px">已选（{{ names.length + '人' }}）</span>

                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item prop="proId" label="选择方案">
                    <el-button @click="selectedProject">选择方案</el-button>&nbsp;&nbsp;&nbsp;
                    <span style="color: #00afff;font-size: 16px">{{ itoAssessInfoDTO.assessInfo.assessTemName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-dialog title="选择被考核人员" :visible.sync="dialogUser" width="70%">
              <el-row :gutter="20">
                <el-col :span="4" :xs="24">

                  <div class="head-container">
                    <el-tree
                      :data="deptOptions"
                      :props="defaultProps"
                      :expand-on-click-node="false"
                      :filter-node-method="filterNode"
                      ref="tree"
                      default-expand-all
                      highlight-current
                      @node-click="handleNodeClick"
                    />
                  </div>
                </el-col>
                <el-col :span="8" :xs="24">
                  <el-form :inline="true" :model="userParams">
                    <el-form-item>
                      <el-input v-model="userParams.all">
                        <el-button slot="append" @click="getUserList" icon="el-icon-search"></el-button>
                      </el-input>
                    </el-form-item>
                    <input type="text" class="form-control" style="display:none">
                  </el-form>
                  <el-table
                    ref="staffTable"
                    :key="tableKey"
                    border
                    fit
                    height="500"
                    highlight-current-row
                    @selection-change="userIdsChange" :data="userList">
                    <el-table-column type="selection" width="50" align="center"/>
                    <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName"
                                     v-if="columns[2].visible" :show-overflow-tooltip="true"/>
                    <el-table-column label="工号" align="center" key="jobNo" prop="jobNo" v-if="columns[7].visible"
                                     :show-overflow-tooltip="true"/>
                  </el-table>
                </el-col>
                <el-col :span="2" :xs="24">
                  <el-button
                    @click="addStaff"
                    type="primary"
                    :disabled="!staffData.length"
                    icon="el-icon-arrow-right"
                    circle
                  ></el-button>
                  <el-button
                    @click="removeStaff"
                    type="primary"
                    :disabled="!selectedStaffData.length"
                    icon="el-icon-arrow-left"
                    circle
                    style="margin-left: 0;margin-top: 10px;"
                  ></el-button>
                </el-col>
                <el-col :span="10">
                  <div style="margin-bottom: 25px">
                    <h3>已选（{{ names.length + '人' }}）</h3>
                  </div>
                  <el-table
                    ref="selectedStaffTable"
                    :key="tableKey"
                    :data="names"
                    border
                    height="450"
                    fit
                    highlight-current-row
                    @selection-change="handleSelectedStaffChange"
                  >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column label="昵称" align="center">
                      <template slot-scope="{row}">
                        <span>{{ row.nickName }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="工号" align="center" key="jobNo" prop="jobNo" v-if="columns[7].visible"
                                     :show-overflow-tooltip="true"/>
                  </el-table>
                  <div style="float: right;margin-top: 15px;margin-right: 20px">
                    <el-button @click="dialogUser = false">取 消</el-button>
                    <el-button type="primary" @click="changeInfo">确 定</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-dialog>
            <el-dialog title="选择考核模板" :visible.sync="dialogEmpVisible" width="50%">
              <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                       label-width="68px">
                <el-form-item prop="assessTemName">
                  <el-input
                    v-model="queryParams.assessTemName"
                    placeholder="请输入关键字搜索模板"
                    clearable
                    @keyup.enter.native="selectedProject"
                    style="width: 150px"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="selectedProject">搜索</el-button>
                </el-form-item>
              </el-form>
              <div class="enterpriseList">
                <el-table
                  ref="Table"
                  @selection-change="handleSelectionChange"
                  :data="assessTemplateList"
                  :header-cell-class-name="cellClass"
                  border
                  tooltip-effect="dark"
                  :row-class-name="selectRowClassName"
                  style="width: 100%">
                  <el-table-column type="selection" width="55" align="center"/>
                  <el-table-column align="center" prop="assessTemName" label="考核名称"></el-table-column>
                  <el-table-column align="center" prop="targetItem" label="指标项"></el-table-column>
                  <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                      <el-button type="text" @click="getPreview(scope.row.id)">预览</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList()"
              />
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEmpVisible = false">取消</el-button>
                <el-button @click="targetClick" type="primary">确认</el-button>
              </div>
              <el-dialog title="职能部门基础岗位绩效考核表"
                         :before-close="closePreview"
                         :visible.sync="previewIndex"
                         width="70%"
                         append-to-body
                         center>
                <div>
                  <el-table
                    :data="targetResultVO"
                    :span-method="objectSpanMethod"
                    border
                    style=" margin-top: 20px">
                    <el-table-column align="center" prop="dimensionalityName" label="类别">
                      <template slot-scope="scope">
                        <span v-if="scope.row.dimensionalityName != null">{{ scope.row.dimensionalityName }}</span>
                        <span v-if="scope.row.dimensionalityName == null">----</span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="targetLabel" label="指标名称">
                      <template slot-scope="scope">
                        <span v-if="scope.row.targetLabel != null">{{ scope.row.targetLabel }}</span>
                        <span v-if="scope.row.targetLabel == null">----</span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="weight" label="权重">
                      <template slot-scope="scope">
                        <span v-if="scope.row.weight != null">{{ scope.row.weight + '%' }}</span>
                        <span v-if="scope.row.weight == null">{{ 0 + '%' }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="targetInfo" label="指标描述">
                      <template slot-scope="scope">
                        <span v-if="scope.row.targetInfo != null">{{ scope.row.targetInfo }}</span>
                        <span v-if="scope.row.targetInfo == null">----</span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="assessCriterion" label="计算方式">
                      <template slot-scope="scope">
                        <span v-if="scope.row.assessCriterion != null">{{ scope.row.assessCriterion }}</span>
                        <span v-if="scope.row.assessCriterion == null">----</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <span slot="footer" class="dialog-footer">
              <el-button @click="closePreview">关闭</el-button>
          </span>
              </el-dialog>

            </el-dialog>
          </div>
          <div style="padding-left: 180px">
            <el-button @click="secondTopClick">上一步</el-button>
            <el-button @click="secondNextClick" type="primary">下一步</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="third">
        <el-button style="float: left" @click="secondTopClick">返回</el-button>
        <el-steps :active="2" :space="500" align-center>
          <el-step title="设置考核信息" icon="el-icon-edit"></el-step>
          <el-step title="选择考核流程" icon="el-icon-upload"></el-step>
        </el-steps>
        <br>
        <hr>
        <el-table :data="itoAssessInfoDTO.flowList" style="width: 100%">
          <el-table-column prop="assessFlow" align="center" label="流程类型"></el-table-column>
          <el-table-column prop="assessName" align="center" label="评分人"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleEdit(scope.$index, scope.row)">编辑
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="upIndex(scope.$index, scope.row)">上移
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="downIndex(scope.$index, scope.row)">下移
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="handleRow(scope.row)">查看考核指标
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-button @click="addFlowDialog" type="primary">新增评分节点</el-button>
        </div>
        <el-dialog title="查看考核指标" :visible.sync="targetRowDialog">
          <el-table :data="targetRow">
            <el-table-column type="index" label="序号" width="55"></el-table-column>
            <el-table-column align="center" property="targetType" label="指标类别" width="150"></el-table-column>
            <el-table-column align="center" property="targetLabel" label="指标名称" width="200"></el-table-column>
            <!--            <el-table-column align="center" property="weight" label="指标权重"></el-table-column>-->
            <el-table-column align="center" property="scoreCeiling" label="总分"></el-table-column>
            <el-table-column align="center" property="assessCriterion" label="考核标准"></el-table-column>
          </el-table>
        </el-dialog>

        <el-drawer
          :title="flowTitle"
          :visible.sync="dialogFlowVisible"
          :before-close="assessNodeClose"
          custom-class="demo-drawer"
          size="50%"
          direction="rtl"
        >
          <el-dialog :append-to-body="true" title="选择考核人员" :visible.sync="flowEmpDialog" width="50%">
            <el-row :gutter="20">
              <el-col :span="6" :xs="24">

                <div class="head-container">
                  <el-tree
                    :data="deptOptions"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    ref="tree"
                    default-expand-all
                    highlight-current
                    @node-click="handleNodeClick"
                  />
                </div>
              </el-col>
              <el-col :span="18" :xs="24">
                <el-form :inline="true" :model="userParams">
                  <el-form-item>
                    <el-input v-model="userParams.all">
                      <el-button slot="append" @click="getUserList" icon="el-icon-search"></el-button>
                    </el-input>
                  </el-form-item>
                  <input type="text" class="form-control" style="display:none">
                </el-form>
                <el-table
                  border
                  height="500"
                  ref="Table"
                  @selection-change="handleSelectionChange"
                  :header-cell-class-name="cellClass"
                  border
                  tooltip-effect="dark"
                  :row-class-name="selectRowClassName"
                  :data="userList">
                  <el-table-column type="selection" width="50" align="center"/>
                  <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName"
                                   v-if="columns[2].visible" :show-overflow-tooltip="true"/>
                  <el-table-column label="工号" align="center" key="jobNo" prop="jobNo" v-if="columns[7].visible"
                                   :show-overflow-tooltip="true"/>
                </el-table>
                <div style="float: right;margin-top: 15px;margin-right: 20px">
                  <el-button @click="flowEmpDialog = false">取 消</el-button>
                  <el-button type="primary" @click="addFlowEmp">确 定</el-button>
                </div>
              </el-col>

            </el-row>
          </el-dialog>
          <el-dialog :before-close="closeTargetDialog" :append-to-body="true" title="选择考核指标"
                     :visible="targetDialog" width="70%">
            <el-table :header-cell-style="{'text-align':'center'}"
                      tooltip-effect="dark"
                      ref="targetForm"
                      @selection-change="targetSelection" :data="targetList">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column align="center" property="targetType" label="指标类别" width="150"></el-table-column>
              <el-table-column align="center" property="targetLabel" label="指标名称" width="200"></el-table-column>
              <el-table-column align="center" property="weight" label="指标权重"></el-table-column>
              <el-table-column align="center" property="scoreCeiling" label="总分"></el-table-column>
              <el-table-column align="center" property="assessCriterion" label="考核标准"></el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
              <el-button @click="closeTargetDialog">取 消</el-button>
              <el-button type="primary" @click="submitTarget">确 定</el-button>
            </div>
          </el-dialog>


          <div style="margin-left: 220px" class="demo-drawer__content">
            <el-form ref="assessNodeForm" label-width="140px" :rules="assessNodeRules" label-position="right"
                     :model="assessNode">
              <el-row :gutter="24">
                <el-col :span="18">
                  <el-form-item prop="assessFlow" label="选择考核流程">
                    <el-select v-model="assessNode.assessFlow" placeholder="请选择">
                      <el-option value="自评"></el-option>
                      <el-option value="部门评审"></el-option>
                      <el-option value="领导评审"></el-option>
                      <el-option value="员工确认"></el-option>
                      <el-option value="hrBP评价"></el-option>
                      <el-option value="部门统计"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="18">
                  <el-form-item label="选择考核人">
                    <el-button @click="addAssessEmp">添加考核人</el-button>&nbsp;&nbsp;&nbsp;
                    &nbsp;<span style="color: #00afff">{{ assessNode.assessName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="18">
                  <el-form-item label="选择评分指标">
                    <el-button @click="optionTarget">选择考核指标</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
                    <span v-if="assessNode.tarIds === undefined">已选（ 0 ）</span>
                    <span v-if="assessNode.tarIds !== undefined  && assessNode.tarIds.length <= 0">已选（ 0 ）</span>
                    <span v-if="assessNode.tarIds !== undefined && assessNode.tarIds.length > 0">{{
                        "已选（ " + assessNode.tarIds.length + " ）"
                      }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item prop="isCheck" label="是否考核审核">
                    <el-switch
                      v-model="assessNode.isCheck"
                      active-color="#13ce66"
                      active-value="1"
                      inactive-value="0">
                    </el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

            <div class="demo-drawer__content" style="margin-left: 140px">
              <el-button @click="assessNodeClose">取 消</el-button>
              <el-button type="primary" @click="addAssessNode">确 定</el-button>
            </div>
          </div>
        </el-drawer>
        <div style="float: right;margin-right: 600px;margin-top: 40px">
          <el-button @click="thirdTopClick">上一步</el-button>
          <el-button @click="thirdNextClick" type="primary">发起考核</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane name="fourth">
        <div>
          <el-button style="float: left" @click="secondTopClick">返回</el-button>
          <div style="margin-left: 100px">
            <h1>考核详情</h1>
          </div>
        </div>
        <br>
        <el-form :model="fourthParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                 label-width="68px">
          <el-form-item prop="all">
            <el-input
              v-model="fourthParams.all"
              placeholder="搜索姓名/工号/部门"
              clearable
              @keyup.enter.native="handleEmpQuery"
              style="width: 200px"
            />
          </el-form-item>
          <input type="text" style="display: none;">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleEmpQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" type="warning" @click="resetEmpQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="empList" style="width: 100%">
          <el-table-column prop="nickName" align="center" label="姓名"></el-table-column>
          <el-table-column prop="jobNo" align="center" label="工号"></el-table-column>
          <el-table-column prop="deptName" align="center" label="部门"></el-table-column>
          <el-table-column prop="stationName" align="center" label="岗位"></el-table-column>
          <el-table-column prop="empStatus" align="center" label="员工状态">
            <template slot-scope="scope">
              <span v-if="scope.row.empStatus === '3'">试用</span>
              <span v-if="scope.row.empStatus === '4'">正式</span>
            </template>
          </el-table-column>
          <el-table-column prop="workNature" align="center" label="工作性质"></el-table-column>
          <el-table-column prop="status" align="center" label="考核状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status === '0'">已完成</span>
              <span v-if="scope.row.status !== '0'">处理中</span>
            </template>
          </el-table-column>
          <el-table-column prop="newName" align="center" label="最新处理人"></el-table-column>
          <el-table-column prop="updateTime" align="center" label="时间">
            <template slot-scope="scope">
              {{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}
            </template>
          </el-table-column>
          <el-table-column prop="sumScore" align="center" label="评分">
            <template slot-scope="scope">
              <span v-if="scope.row.sumStatus === '0'">{{ scope.row.sumScore }}</span>
              <span v-if="scope.row.sumStatus === '1'">待评分</span>
            </template>
          </el-table-column>
          <el-table-column prop="grade" align="center" label="等级"></el-table-column>
          <el-table-column prop="coefficient" align="center" label="系数"></el-table-column>
          <el-table-column align="center" width="200" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="empInfo(scope.row)">查看详情
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="empInfoFlow(scope.row.aid,scope.row.uid)">查看考核流程
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="empTotal>0"
          :total="empTotal"
          :page.sync="fourthParams.pageNum"
          :limit.sync="fourthParams.pageSize"
          @pagination="handleEmpQuery()"
        />

      </el-tab-pane>
      <el-dialog title="考核流程" :visible.sync="centerDialogVisible" width="40%" center>
        <div style="height: 300px;">
          <el-steps direction="vertical" finish-status="success" :active="active">
            <el-step :title="createData.createBy +' ' +'发起考核'"
                     :description="
                     parseTime(createData.createTime, '{y}-{m}-{d}')"
            ></el-step>
            <el-step :title="activity.nickName +'  '+ activity.assessFlow"
                     :description="
                     parseTime(activity.updateTime, '{y}-{m}-{d}')"
                     v-for="(activity, index) in activities">
            </el-step>
          </el-steps>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
          </span>
      </el-dialog>
      <el-tab-pane name="fifth">
        <div v-if="assessEmpInfoList.length > 0">
          <el-button style="float: left" @click="fourthInfoClick(assessEmpInfoList[0].aid)">返回</el-button>
          <div style="margin-left: 100px">
            <h1>考核详情</h1>
          </div>
          <el-card class="box-card">
            <div slot="header" class="clearfix" style="text-align: center">
              <center>
                <el-descriptions :colon="false" style="float: left" :column="5">
                  <el-descriptions-item label="姓名">
                    {{ assessEmpInfoList[0].empName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="工号">
                    {{ assessEmpInfoList[0].jobNo }}
                  </el-descriptions-item>
                  <el-descriptions-item label="考核周期">
                    {{ assessEmpInfoList[0].assessPeriod }}
                  </el-descriptions-item>
                  <el-descriptions-item label="考核方案">
                    {{ assessEmpInfoList[0].assessTemName }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <el-button style="float: right; padding: 3px 0"
                               @click="empInfoFlow(assessEmpInfoList[0].aid,assessEmpInfoList[0].uid)" type="text">
                      查看考核流程
                    </el-button>
                  </el-descriptions-item>
                  <el-descriptions-item label="部门">
                    {{ assessEmpInfoList[0].deptName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="岗位">
                    {{ assessEmpInfoList[0].stationName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="考核名称">
                    {{ assessEmpInfoList[0].assessName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="考核结束时间">
                    {{
                      parseTime(assessEmpInfoList[0].assessDeadline, '{y}-{m}-{d}')
                    }}
                  </el-descriptions-item>
                </el-descriptions>
              </center>
            </div>
            <el-table
              border
              :data="assessEmpInfoList"
              style="width: 100%">
              <el-table-column align="center" prop="targetLabel" label="指标名称"></el-table-column>
              <el-table-column align="center" prop="weight" label="指标权重">
                <template slot-scope="scope">{{ scope.row.weight + ' %' }}</template>
              </el-table-column>
              <el-table-column align="center" prop="scoreCeiling" label="评分上限"></el-table-column>
              <el-table-column align="center" prop="assessCriterion" label="考核标准"></el-table-column>
              <el-table-column align="center" prop="nickName" label="评分人"></el-table-column>
              <el-table-column align="center" prop="score" label="分数">
                <template slot-scope="scope">
                  <span v-if="scope.row.score !== null">{{ scope.row.score }}</span>
                  <span v-if="scope.row.score === null">未评分</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="calculate" label="得分">
                <template slot-scope="scope">
                  <span v-if="scope.row.calculate !== null">{{ scope.row.calculate }}</span>
                  <span v-if="scope.row.calculate === null">未评分</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  import {selectList, selectPreviewByProId, selectDimTarByProId, getTargetByProId} from '@/api/system/assessproject'
  import Template from "@/views/system/email/ItoTemplate";
  import {deptTreeSelect} from "@/api/system/user";
  import {listEmp,synchronizationSalary} from '@/api/system/assess'
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {
    addAssessInfo,
    getAssessInfoList,
    getTargetByProIdAndTarIds,
    getEmpListByAId,
    getEmpInfoFlow,
    getAssessEmpInfo
  } from '@/api/system/assessInfo'
  import {
    selectTargetTypeById,
  } from '@/api/system/targetlib'

  export default {
    name: "",
    components: {Template, Treeselect},
    data() {
      return {
        reverse: true,
        activities: [],
        centerDialogVisible: false,
        empTotal: 0,

        flowTitle: '',
        targetList: [],
        targetDialog: false,
        flowEmpDialog: false,
        assessNode: {
          weight: 1
        },
        dialogFlowVisible: false,
        assessNodeRules: {
          assessFlow: [
            {required: true, message: '请选择考核流程', trigger: 'change'}
          ],
        },
        infoRules: {
          assessName: [
            {required: true, message: '请输入考核名称', trigger: 'blur'}
          ],
          assessPeriod: [
            {required: true, message: '请选择考核周期', trigger: 'change'}
          ],
          assessDeadline: [
            {type: 'date', required: true, message: '请选择截至时间', trigger: 'change'}
          ],
        },
        tableKey: 0,
        staffData: [],
        selectedStaffData: [],
        // 列信息
        columns: [
          {key: 0, label: `用户编号`, visible: true},
          {key: 1, label: `用户名称`, visible: true},
          {key: 2, label: `用户昵称`, visible: true},
          {key: 3, label: `部门`, visible: true},
          {key: 4, label: `手机号码`, visible: true},
          {key: 5, label: `状态`, visible: true},
          {key: 6, label: `创建时间`, visible: true},
          {key: 7, label: `工号`, visible: true}
        ],
        userList: [],
        // 部门树选项
        deptOptions: undefined,
        defaultProps: {
          children: "children",
          label: "label"
        },
        dialogUser: false,
        previewIndex: false,
        testArr1: [],
        testPosition1: 0,
        targetResultVO: [],
        empList: [
          {nickName: 'zhangs'}
        ],
        performanceList: [],

        assessTemplateList: [],
        dialogEmpVisible: false,
        itoAssessInfoDTO: {
          assessInfo: {},
          flowList: []
        },
        active: 1,
        activeName: 'first',
        tabFlag: false,
        tabPosition: 'bottom',
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          assessTemName: '',
          status: '0'
        },
        fourthParams: {
          pageNum: 1,
          pageSize: 10,
          all: '',
          aid: undefined
        },
        //每页显示多少条数
        total: 1,
        // 显示搜索条件
        showSearch: true,
        tableSelect: [],
        // 查询参数
        userParams: {
          deptId: null,
          all: ''
        },
        names: [],
        targetRow: [],
        targetRowDialog: false,
        aid: undefined,
        createData: {
          createTime: null,
          createBy: null
        },
        assessEmpInfoList: []
      }
    }
    ,
    created() {
      this.getList()
      this.getDeptTree()
    }
    ,
    methods: {
      synchronizationSalary(row) {
        this.$confirm('此操作将同步本月绩效到薪酬列表', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: '正在同步到薪酬列表，请稍等！',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          synchronizationSalary(row.aid).then(res =>{
            loading.close();
            this.$message({
              type: 'success',
              message: '已同步'
            });
          })
        }).catch(() => {
          loading.close();
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });

      },
      empInfo(row) {
        getAssessEmpInfo(row.aid, row.uid).then(res => {
          this.assessEmpInfoList = res.data
        })
        this.activeName = 'fifth'
      },
      empInfoFlow(aid, uid) {
        this.centerDialogVisible = true
        getEmpInfoFlow(aid, uid).then(res => {
          console.log(res)
          this.createData.createTime = res.data[0].createTime
          this.createData.createBy = res.data[0].createBy
          this.activities = res.data
          res.data.map(r => {
            if (res.data[0].status === '0') {
              this.active = 1
              return;
            } else if (r.status === '1') {
              this.active = r.sequence + 1
            }
          })
        })
      },
      handleEmpQuery() {
        getEmpListByAId(this.fourthParams).then(res => {
          this.empTotal = res.total
          this.empList = res.rows;
        })
      },
      resetEmpQuery() {
        this.fourthParams = {
          pageNum: 1,
          pageSize: 10,
          aid: this.fourthParams.aid,
          all: ''
        }
        this.handleEmpQuery()
      },
      assessNodeClose() {
        this.assessNode = {weight: 1};
        this.tableSelect = []
        this.dialogFlowVisible = false
      },
      addFlowDialog() {
        this.dialogFlowVisible = true;
        this.flowTitle = '新增评分节点'
      },
      closeTargetDialog() {
        this.targetDialog = false
      },
      submitTarget() {
        if (this.assessNode.tarIds.length > 0) {
          this.targetDialog = false
        } else {
          this.$message.warning("请至少选择一个指标项！");
        }
      },
      targetSelection(selection) {
        this.assessNode.tarIds = selection.map(item => item.id)
        this.assessNode.dimIds = selection.map(item => item.dimId)
        this.assessNode.targets = selection
      },
      optionTarget() {
        let tarIds = []
        let dimIds = []
        let targets = []
        if (this.itoAssessInfoDTO.flowList.length > 0) {
          this.itoAssessInfoDTO.flowList.map(f => {
            f.targets.map(t => {
              tarIds.push(t.id)
              dimIds.push(t.dimId)
              targets.push(t)
            })
          })
          if (this.assessNode.tarIds !== undefined && this.assessNode.dimIds !== undefined && this.assessNode.dimIds !== null && this.assessNode.tarIds !== null) {
            let filterHasSameArr = (tarIds, nodeTarIds) => {
              return tarIds.filter((item) => {
                if (nodeTarIds.indexOf(item) < 0) {
                  return item;
                }
              });
            }
            let target = filterHasSameArr(targets, this.assessNode.targets);
            let ids = target.map(t => t.id)
            let dIds = target.map(t => t.dimId)
            console.log(ids)
            console.log(dIds)
            if (ids !== undefined && dIds !== undefined && ids !== null && dIds !== null && dIds.length > 0 && ids.length > 0) {
              getTargetByProIdAndTarIds(this.itoAssessInfoDTO.assessInfo.proId, ids, dIds).then(res => {
                this.targetList = res.data
                if (this.assessNode.targets !== undefined) {
                  this.toggleSelection(this.assessNode.targets)
                }
                this.targetDialog = true
              })
            } else {
              getTargetByProId(this.itoAssessInfoDTO.assessInfo.proId).then(res => {
                this.targetList = res.data
                if (this.assessNode.targets !== undefined) {
                  this.toggleSelection(this.assessNode.targets)
                }
                this.targetDialog = true
              })
            }
          } else {
            getTargetByProIdAndTarIds(this.itoAssessInfoDTO.assessInfo.proId, tarIds, dimIds).then(res => {
              this.targetList = res.data
              if (this.assessNode.targets !== undefined) {
                this.toggleSelection(this.assessNode.targets)
              }
              this.targetDialog = true
            })
          }

        } else {
          getTargetByProId(this.itoAssessInfoDTO.assessInfo.proId).then(res => {
            this.targetList = res.data
            if (this.assessNode.targets !== undefined) {
              this.toggleSelection(this.assessNode.targets)
            }
            this.targetDialog = true
          })
        }
      },
      addAssessEmp() {
        this.flowEmpDialog = true;
        this.getUserList()
      },
      upIndex(index, row) {
        if (index > 0) {
          let upDate = this.itoAssessInfoDTO.flowList[index - 1];
          this.itoAssessInfoDTO.flowList.splice(index - 1, 1);
          this.itoAssessInfoDTO.flowList.splice(index, 0, upDate);
          this.itoAssessInfoDTO.flowList[index].index = index - 1;
        } else {
          this.$message.warning("已经是第一条了！");
          return false;
        }
      },

      downIndex(index, row) {
        if (index + 1 === this.itoAssessInfoDTO.flowList.length) {
          this.$message.warning("已经是最后一条了！");
          return false;
        } else {
          let downDate = this.itoAssessInfoDTO.flowList[index + 1];
          this.itoAssessInfoDTO.flowList.splice(index + 1, 1);
          this.itoAssessInfoDTO.flowList.splice(index, 0, downDate);
          this.itoAssessInfoDTO.flowList[index].index = index + 1;
        }
      },
      addAssessNode() {
        this.$refs["assessNodeForm"].validate(valid => {
          if (valid) {
            if (this.assessNode.index !== undefined && this.assessNode.index !== null) {
              if (this.assessNode.tarIds !== undefined && this.assessNode.tarIds.length > 0) {
                this.itoAssessInfoDTO.flowList[this.assessNode.index] = this.assessNode
                this.assessNodeClose()
              } else {
                this.$message({
                  message: '至少选择一个指标',
                  type: 'warning'
                });
              }
            } else {
              if (this.assessNode.assessUserId !== undefined && this.assessNode.assessUserId !== null) {
                if (this.assessNode.tarIds !== undefined && this.assessNode.tarIds.length > 0) {
                  this.itoAssessInfoDTO.flowList.push(this.assessNode);
                  this.assessNodeClose()
                } else {
                  this.$message({
                    message: '至少选择一个指标',
                    type: 'warning'
                  });
                }
              } else {
                this.$message({
                  message: '请选择考核人员',
                  type: 'warning'
                });
              }
            }

          }
        })
      },
      handleRow(row) {
        this.targetRow = row.targets
        this.targetRowDialog = true
        console.log(row)
      },
      changeInfo() {
        if (this.names.length > 0) {
          this.itoAssessInfoDTO.assessInfo.userIds = this.names.map(i => i.userId)
          this.dialogUser = false;
          this.tableSelect.length = 0
        } else {
          this.$message({
            message: '请选择至少一名被考核人员',
            type: 'warning'
          });
        }
      }
      ,
      // 将右边表格选择项存入selectedStaffData中
      handleSelectedStaffChange(rows) {
        this.selectedStaffData = [];
        if (rows) {
          rows.forEach(row => {
            if (row) {
              this.selectedStaffData.push(row);
            }
          });
        }
      }
      ,
      addStaff() {
        setTimeout(() => {
          this.$refs["staffTable"].clearSelection();
          this.$refs["selectedStaffTable"].clearSelection();
        }, 0);
        let repeat = false;
        this.names.forEach(item => {
          if (this.staffData[0] && item.userId === this.staffData[0].userId) {
            repeat = true;
            alert("此员工已添加");
            return;
          }
        });
        if (repeat === false) {
          this.staffData.forEach(item => {
            this.names.push(item);
          });
          for (let i = 0; i < this.userList.length; i++) {
            for (let j = 0; j < this.staffData.length; j++) {
              if (
                this.userList[i] &&
                this.staffData[j] &&
                this.userList[i].userId === this.staffData[j].userId
              ) {
                this.userList.splice(i, 1);
              }
            }
          }
        }
      }
      ,
      removeStaff() {
        setTimeout(() => {
          this.$refs["staffTable"].clearSelection();
          this.$refs["selectedStaffTable"].clearSelection();
        }, 0);
        this.selectedStaffData.forEach(item => {
          this.userList.push(item);
        });
        for (let i = 0; i < this.names.length; i++) {
          for (let j = 0; j < this.selectedStaffData.length; j++) {
            if (
              this.names[i] &&
              this.selectedStaffData[j] &&
              this.names[i].userId === this.selectedStaffData[j].userId
            ) {
              this.names.splice(i, 1);
            }
          }
        }
      }
      ,
      userIdsChange(val) {
        this.staffData = [];
        if (val) {
          val.forEach(row => {
            if (row) {
              this.staffData.push(row);
            }
          });
        }
      }
      ,
      /** 查询部门下拉树结构 */
      getDeptTree() {
        deptTreeSelect().then(response => {
          this.deptOptions = response.data;
        });
      }
      ,
      getList() {
        getAssessInfoList(this.queryParams).then(res => {
          this.performanceList = res.rows
          this.total = res.total
        })
      }
      ,
      getUserList() {
        listEmp(this.userParams).then(response => {
            this.userList = response.data;
          }
        );
      }
      ,
      fourthInfoClick(aid) {
        this.fourthParams.aid = aid
        getEmpListByAId(this.fourthParams).then(res => {
          this.empTotal = res.total
          console.log(res.rows)
          this.empList = res.rows;
          this.activeName = 'fourth'
        })
      },
      handleEdit(index, row) {
        this.flowTitle = '编辑评分节点'
        console.log(row)
        this.assessNode = row
        this.assessNode.index = index
        this.dialogFlowVisible = true

      },
      toggleSelection(rows) {
        rows.forEach(row => {
          this.$nextTick(() =>
            this.targetList.find(item => {
              if (row.id === item.id && row.dimId === item.dimId) {
                this.$refs.targetForm.toggleRowSelection(item, true)
              }
            })
          );
        });
      },
      handleDelete(index, row) {
        this.itoAssessInfoDTO.flowList.splice(index, 1);
      }
      ,
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      }
      ,
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("assessListForm");
        this.handleQuery();
      }
      ,
      firstClickTab() {
        this.activeName = 'second'
      }
      ,
      secondTopClick() {
        this.activeName = 'first'
      }
      ,
      targetClick() {
        if (this.tableSelect.length > 0) {
          this.itoAssessInfoDTO.assessInfo.proId = this.tableSelect[0].id
          this.itoAssessInfoDTO.assessInfo.assessTemName = this.tableSelect[0].assessTemName
          this.dialogEmpVisible = false
        } else {
          this.$message({
            message: '请选择考核模板',
            type: 'warning'
          });
        }
      }
      ,
      secondNextClick() {
        this.$refs["infoForm"].validate(valid => {
          if (valid) {
            if (this.names.length > 0) {
              if (this.itoAssessInfoDTO.assessInfo.proId != null) {
                this.activeName = 'third'
              } else {
                this.$message({
                  message: '请选择考核模板',
                  type: 'warning'
                });
              }
            } else {
              this.$message({
                message: '请选择至少一名被考核人员',
                type: 'warning'
              });
            }
          }
        })
      }
      ,
      thirdTopClick() {
        this.activeName = 'second'
      }
      ,
      thirdNextClick() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        if (this.itoAssessInfoDTO.flowList.length > 0) {
          addAssessInfo(this.itoAssessInfoDTO).then(res => {
            this.itoAssessInfoDTO = {
              assessInfo: {},
              flowList: []
            }
            this.assessNode = {
              weight: 1
            }
            loading.close();
            this.getList()
            this.activeName = 'first'
          })

        } else {
          loading.close();
          this.$message({
            message: '至少添加一条考核流程',
            type: 'warning'
          });
        }
      }
      ,
      fifthInfoClick() {
        this.activeName = 'fifth'
      }
      ,
      addEmp() {
        this.dialogUser = true
        this.getUserList()
      }
      ,
      selectedProject() {
        selectList(this.queryParams).then(res => {
          this.assessTemplateList = res.rows;
          let obj = [];
          this.assessTemplateList.map(a => {
            selectDimTarByProId(a.id).then(res => {
              a.targetItem = res.data.length
              obj.push(a)
            })
          })
          this.assessTemplateList = obj
          this.dialogEmpVisible = true
        })
      }
      ,
      getPreview(id) {
        this.previewIndex = true
        selectPreviewByProId(id).then(res => {
          this.testArr1 = []
          this.testPosition1 = 0
          this.targetResultVO = res.data
          this.rowspan(this.testArr1, this.testPosition1, "dimensionalityName");
        })
      }
      ,
      rowspan(spanArr, position, spanName) {
        this.targetResultVO.forEach((item, index) => {
          if (index === 0) {
            spanArr.push(1);
            position = 0;
          } else {
            if (
              this.targetResultVO[index][spanName] ===
              this.targetResultVO[index - 1][spanName]
            ) {
              spanArr[position] += 1;
              spanArr.push(0);
            } else {
              spanArr.push(1);
              position = index;
            }
          }
        });
      }
      ,
      closePreview() {
        this.testArr1 = []
        this.testPosition1 = 0
        this.targetResultVO = []
        this.previewIndex = false
      }
      ,
      objectSpanMethod({row, column, rowIndex, columnIndex}) {
        if (columnIndex === 0) {
          const _row = this.testArr1[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col,
          };
        }
      }
      ,
      selectRowClassName({row}) {//添加表格行点击样式--rowIndex
        let color = "";
        this.tableSelect.forEach(item => {
          if (item.num === row.num) {
            color = "current";
          }
        });
        return color;
      }
      ,
      handleSelectionChange(val) {//表格选中事件
        if (val.length > 1) {
          this.$refs.Table.clearSelection();
          this.$refs.Table.toggleRowSelection(val.pop());
        } else {
          this.tableSelect = val;
        }
      }
      ,
      addFlowEmp() {
        if (this.tableSelect.length > 0) {
          this.assessNode.assessName = this.tableSelect[0].nickName
          this.assessNode.assessUserId = this.tableSelect[0].userId
          this.getUserList()
          this.flowEmpDialog = false
          this.tableSelect.length = 0
        } else {
          this.$message({
            message: '最少选择一名考核人员',
            type: 'warning'
          });
        }
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      }
      ,
      // 节点单击事件
      handleNodeClick(data) {
        this.userParams.deptId = data.id;
        this.getUserList();
      }
      ,
      // 隐藏表头中的全选框
      cellClass(row) {
        if (row.columnIndex === 0) {
          return 'disabledCheck'
        }
      }
      ,
    }
  }

</script>

<style scoped>
  /*去掉切换时el-tab-pane底部的蓝色下划线*/
  /deep/ .el-tabs__active-bar {
    background-color: transparent !important;
  }

  /*去掉tabs底部的下划线*/
  /deep/ .el-tabs__nav-wrap::after {
    position: static !important;
  }

  /* 去掉全选按钮 */
  ::v-deep .el-table .disabledCheck .cell .el-checkbox__inner {
    display: none !important;
  }

</style>
